import React, { Component } from 'react'
import TodoListUI from './TodoListUI'
import store from './store/index'

import {
  getInputChangeAction,
  getAddTodoItemAction,
  getDelTodoItemAction
} from './store/actionsCreater'

class TodoList extends Component {
  constructor (props) {
    super(props)
    this.state = {}
    this.state = store.getState()
    this.handleInputChange = this.handleInputChange.bind(this)
    this.handleBtnClick = this.handleBtnClick.bind(this)

    this.handleStoreChange = this.handleStoreChange.bind(this)

    // 响应式取store数据
    store.subscribe(this.handleStoreChange)
  }
  handleStoreChange () {
    let newState = store.getState()
    this.setState(newState)
  }
  handleInputChange (e) {
    const action = getInputChangeAction(e.target.value)
    store.dispatch(action)
  }
  handleBtnClick () {
    const action = getAddTodoItemAction()
    store.dispatch(action)
  }
  handleItemClick (index) {
    const action = getDelTodoItemAction(index)
    store.dispatch(action)
  }
  render () {
    return <TodoListUI props={this.state}></TodoListUI>
  }
}

export default TodoList
